<template>
  <div>
    <BaseModal @onSubmit="onSubmit" @onClose="onClose" :show="show" title="编辑实验环境">
      <div class="demo-input-suffix">
        <span class="form-input-label">所属实验：</span>
        <el-select v-model="data.experiment_id" placeholder="请选择">
          <el-option
            v-for="item in experiments"
            :key="item.id"
            :label="item.experiment_name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label">实验环境名称：</span>
        <el-input v-model="data.environment_name" placeholder=""></el-input>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label">镜像名称：</span>
        <el-select v-model="data.image" placeholder="请选择">
          <el-option
            v-for="item in images"
            :key="item.id"
            :label="item.image_name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label">子网名称：</span>
        <el-input v-model="data.subnet_name" placeholder=""></el-input>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label">子网地址：</span>
        <el-input v-model="data.cidr_block" placeholder=""></el-input>
      </div>
      <div class="demo-input-suffix">
        <span class="form-input-label">是否连接公网：</span>
        <el-select v-model="data.is_open" placeholder="请选择">
          <el-option
            v-for="item in is_open_status"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>

    </BaseModal>
  </div>
</template>
<script>
import modalClose from "@/mixins/modalClose";
import { envModel, imageModel, experimentModel } from "@/api/models";
import { Message } from "element-ui";
import openStatus from '@/common/is_open_status.js';
export default {
  mixins: [modalClose],
  components: {},
  data() {
    return {
      images: [],
      is_open_status: openStatus.status,
      data: {
        environment_name: '',
        image: '',
        subnet_name: '192.168.0.1',
        cidr_block: '192.168.0.0/24',
        is_open: null,
        experiment_id: null
      },
      experiments: []
    };
  },
  props: {
    obj: {
      type: Object,
      default: null
    },
    experiment_id: {
      type: [Number, String],
      default: null
    }
  },
  watch: {
    obj: function(value) {
      if(value && value.environment_name) {
        envModel.item(value.id, res => {
          this.data = res.data
        })
      }
    }
  },
  mounted() {
    this.getImages();
    this.getExperiments();
  },
  methods: {
    getImages() {
      imageModel.list({
        import_status: 2
      }, res => {
        this.images = res.data
      })
    },
    getExperiments() {
      experimentModel.list({}, res => {
        this.experiments = res.data
      })
    },
    onSubmit() {
      let d = this.data;
      if (!d.environment_name) {
        return Message.warning("请填完整信息");
      }
      d.images = [d.image]
      let action = d.id ? envModel.update : envModel.create;
      action(d, res=> {
        Message.success(res.message);
        this.$emit('onClose');
        this.$emit('afterSubmit', res.data.id);
      })
    },
    onClose() {
      this.$emit("onClose");
    }
  }
};
</script>
<style lang="scss">
</style>